<template>
  <div class="home">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="table-w">
            <div class="title">今日回收入库登记列表</div>
            <el-table
              :data="restorageList"
              :row-style="tableRowStyle"
              :header-cell-style="tableHeaderColor"
              highlight-current-row
              @row-click="rowClick"
              style="width: 100%;font-size:26px"
              height="14rem"
            >
              <el-table-column prop="RegisterDate" label="登记时间" width="80" align="center">
                <template slot-scope="scope">{{$moment(scope.row.RegisterDate).format('HH:mm:ss')}}</template>
              </el-table-column>
              <el-table-column prop="CustomerName" label="外协厂家" width="80" align="center"></el-table-column>
              <el-table-column prop="TotalWeight" label="总重量（克）" align="center"></el-table-column>
              <el-table-column prop="TotalCount" label="总数量（片）" width="120" align="center"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="buts">
            <div class="block">
              <span class="tit">外协单位：{{selCustomer.CustomerName}}</span>
              <el-button
                type="primary"
                class="button"
                :class="selCustomer.FlnkID ? 'active': ''"
                style="margin-left:10px"
                @click="handleCustomer()"
              >选择</el-button>
            </div>
            <el-button type="primary" class="button" @click="swipeTagShow = true">扫单据</el-button>
          </div>
          <div class="order-w" v-if="styleList.length > 0">
            <div
              class="order"
              :class="selOrder == item ? 'active' : ''"
              v-for="(item,index) in styleList"
              :key="index"
              @click="handleDetail(item)"
            >
              <div class="row">款式：{{item.StyleNames}}</div>
              <div class="row">登记时间：{{$moment(item.RegisterDate).format('YYYY-MM-DD')}}</div>
              <div class="row">回收时间：{{$moment(item.RebackDate).format('YYYY-MM-DD')}}</div>
              <div class="row">待确认：{{item.TotalCount - item.TargetCount}}片</div>
            </div>
          </div>
          <div class="order-w" v-else>请选择外协单位</div>
          <div class="cutting-w">
            <el-table
              :data="cuttingList"
              :row-style="tableRowStyle"
              :header-cell-style="tableHeaderColor"
              highlight-current-row
              style="width: 100%;font-size:26px"
              height="10rem"
            >
              <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="CustomerName" label="客户名称" width="180" align="center"></el-table-column>
              <el-table-column prop="StyleName" label="款式名称" align="center"></el-table-column>
              <el-table-column prop="SpecConfigName" label="尺码" width="120" align="center"></el-table-column>
              <el-table-column prop="ColorConfigName" label="颜色" width="120" align="center"></el-table-column>
              <el-table-column prop="DetailExtend3" label="部位" width="120" align="center"></el-table-column>
              <el-table-column prop="DetailExtend1" label="裁片" width="120" align="center"></el-table-column>
              <el-table-column prop="CuttingWeight" label="重量（克）" width="120" align="center">
                <template slot-scope="scope">{{Number(scope.row.CuttingWeight).toFixed(2)}}</template>
              </el-table-column>
              <el-table-column prop="StockCount" label="数量（片）" width="120" align="center"></el-table-column>
              <el-table-column prop="TargetCuttingCount" label="确认数量（片）" width="120" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.TargetCuttingCount" placeholder="请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="60" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="delClick(scope.$index, cuttingList)"
                    type="text"
                    size="small"
                  >移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="buts" style="flex-direction: row-reverse;">
            <el-button
              type="primary"
              class="button"
              @click="saveForeignCuttingInStock()"
              v-if="showBtn"
            >入库</el-button>
            <el-input v-model="barCode" ref="barCode" placeholder="请输入/扫描垛号" style="width:150px;margin-right:5px;"></el-input>
            <span style="font-size:0.4rem;">垛号：</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 外协单位列表 -->
    <div class="menuModalBox-w" v-show="dialogShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogShow = false" />
        </div>
        <div class="block-w">
          <div
            class="block"
            v-for="(item,index) in customerList"
            :key="index"
            @click="handleBlock(item)"
          >
            <div class="block-top">{{item.CustomerName}}</div>
            <div class="block-bot">
              <span>{{item.CustomerShort}}</span>
              <span>{{item.Contacts}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 扫描标签二维码 -->
    <div class="menuModalBox-w" v-show="swipeTagShow" @click="$refs.swipeTag.focus()">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="swipeTagShow = false" />
        </div>
        <div class="info">{{swipeTagText}}</div>
        <input
          type="text"
          ref="swipeTag"
          @keyup.enter="swipeTagEnter"
          v-model="swipeTag"
          style="opacity: 1;z-index=-1;"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Mixin from '@/components/mixin' // 混入
import {getForeignCustomerListBySpell, getForeignCuttingRegisterByDesign, getForeignCuttingRegister,
saveForeignCuttingInStock, getForeignCuttingRegisterByCustomer, getForeignCuttingDetail, getForeignCuttingInDetailByFlnkID} from '@/api/outsource' // 接口
import {getKCNumber, getFabricInStockDesign} from '@/api/instorage'
export default {
  name: 'restorage',
  data () {
    return {
      dialogShow: false,
      restorageList: [],
      cuttingList: [],
      endDate: '',
      customerList: [],
      swipeTag: '',
      swipeTagShow: false,
      swipeTagText: '请扫描物料标签',
      styleList: [],
      selCustomer: '',
      selOrder: '',
      selDetail: '',
      registerID: '',
      barCode: '',
      showBtn: true,
      materielType: ''
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 公共接口-搜索外协单位客户列表
    getForeignCustomerListBySpell () {
      let vm = this
      let params = new FormData()
      params.append('Spell', '')
      getForeignCustomerListBySpell(params).then((response) => {
        if (response.data.result) {
          vm.customerList = response.data.data
        }
      })
    },
    // 标签扫描完成触发
    swipeTagEnter () {
      let vm = this
      vm.initData() // 将选中信息置空

      let params = new FormData()
      params.append('RegisterID', vm.swipeTag)
      getForeignCuttingRegisterByDesign(params).then((response) => {
        if (response.data.result) {
          if (
              response.data.data &&
              response.data.data.length &&
              response.data.data.length > 0
            ) {
            vm.selCustomer = {
              FlnkID: response.data.data[0].CustomerFlnkID,
              CustomerName: response.data.data[0].CustomerName
            }
          }
          vm.styleList = response.data.data
          vm.$message('刷卡成功')
        }
      })
      vm.swipeTagShow = false
    },
    // 外协片-读取外协片入库登记列表
    getForeignCuttingRegister () {
      let vm = this
      let params = new FormData()
      params.append('RegisterType', 1)
      params.append('StartDate', '')
      params.append('EndDate', '')
      getForeignCuttingRegister(params).then((response) => {
        if (response.data.result) {
          vm.restorageList = response.data.data
        }
      })
    },
    // 移出
    delClick (index, rows) {
      rows.splice(index, 1)
    },
    // 外协片-外协库到总仓调拨记账（入库）
    async saveForeignCuttingInStock () {
      let vm = this

      if (vm.cuttingList.length === 0) {
        vm.$message('请扫单据或选择外协单位获取登记信息')
        return
      }
      if (vm.selCustomer === '') {
        vm.$message('请选择外协单位')
        return
      }
      if (vm.barCode === '') {
        vm.$message('请输入/扫描垛号')
        vm.$refs.barCode.focus()
        return
      }

      await vm.getKCNumber()

      let detail = []
      vm.cuttingList.map((item) => {
        detail.push({
          FlnkID: item.FlnkID,
          RegisterFlnkID: vm.selDetail.FlnkID
            ? vm.selDetail.FlnkID
            : '00000000-0000-0000-0000-000000000000',
          OldStockFlnkID: item.OldStockFlnkID,
          TargetStockFlnkID: item.TargetStockFlnkID,
          OldCuttingCount: item.StockCount,
          TargetCuttingCount: Number(item.TargetCuttingCount)
        })
      })
      let params = {
        FlnkID: vm.selDetail.FlnkID
          ? vm.selDetail.FlnkID
          : '00000000-0000-0000-0000-000000000000',
        RegisterID: vm.registerID,
        OldRegisterFlnkID: vm.selOrder.FlnkID,
        CustomerFlnkID: vm.selCustomer.FlnkID,
        OperFlnkID: vm.getLocalStorage('UserFlnkID'),
        BarCode: vm.barCode,
        WarehouseFlnkID: vm.warehouseFormat('C'),
        Detail: detail
      }
      saveForeignCuttingInStock(params).then((response) => {
        if (response.data.result) {
          var DesignID = response.data.DesignID
          let params1 = new FormData()
          // 根据裁片编号获取裁片信息  自裁片等等
          params1.append('StockID', DesignID)
          getFabricInStockDesign(params1).then((response) => {
            if (response.data.result) {
              var info = response.data.data
              if (vm.isAndroid()) {
                window.android.print('CW', JSON.stringify(info))
              } else {
                vm.$message(JSON.stringify(info))
              }
            }
          })
          vm.getForeignCuttingRegister()
          vm.initData()
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    // 外协片-根据外协单位读取外协片出入库登记
    getForeignCuttingRegisterByCustomer () {
      let vm = this
      let params = new FormData()
      params.append('CustomerFlnkID', vm.selCustomer.FlnkID)
      getForeignCuttingRegisterByCustomer(params).then((response) => {
        if (response.data.result) {
          vm.styleList = response.data.data
          vm.$message('获取成功')
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    handleBlock (item) {
      let vm = this
      vm.selCustomer = item
      vm.getForeignCuttingRegisterByCustomer()
      vm.dialogShow = false
    },
    handleCustomer () {
      let vm = this
      vm.styleList = []
      vm.cuttingList = []
      vm.dialogShow = true
    },
    handleDetail (item) {
      let vm = this
      vm.showBtn = true
      vm.selOrder = item
      vm.getForeignCuttingInDetailByFlnkID()
    },
    // 外协片-读取外协片出入库登记明细
    getForeignCuttingDetail (row) {
      let vm = this
      let params = new FormData()
      params.append('RegisterFlnkID', row ? row.FlnkID : vm.selOrder.FlnkID)
      getForeignCuttingDetail(params).then((response) => {
        if (response.data.result) {
          vm.cuttingList = response.data.data
        }
      })
    },
    // 外协片-读取外协片出入库登记明细(选择)
    getForeignCuttingInDetailByFlnkID () {
      let vm = this
      let params = new FormData()
      params.append('RegisterFlnkID', vm.selOrder.FlnkID)
      getForeignCuttingInDetailByFlnkID(params).then((response) => {
        if (response.data.result) {
          if (
              response.data.data &&
              response.data.data.length &&
              response.data.data.length > 0
            ) {
            response.data.data.map((item) => {
              item.TargetCuttingCount = item.StockCount
            })
          }
          vm.cuttingList = response.data.data
        }
      })
    },
    // 点击行
    rowClick (row) {
      let vm = this
      vm.showBtn = false
      vm.selDetail = row
      vm.getForeignCuttingDetail(row)
      vm.initData()
      vm.selCustomer = {
        FlnkID: row.CustomerFlnkID,
        CustomerName: row.CustomerName
      }
    },
    // 读取入库单
    async getKCNumber () {
      let vm = this
      let params = {
        ShortName: 'CW'
      }
      await getKCNumber(params).then((response) => {
        if (response.data) {
          vm.registerID = response.data
        }
      })
    },
    initData () {
      let vm = this
      vm.selCustomer = ''
      vm.selDetail = ''
      vm.styleList = []
      vm.cuttingList = []
      vm.barCode = ''
    }
  },
  watch: {
    swipeTagShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.swipeTag.focus()
        })
      }
    }
  },
  mounted () {
    let vm = this
    vm.getForeignCustomerListBySpell()
    vm.getForeignCuttingRegister()
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/outsource/restorage.scss";
</style>
<style lang="scss">
.el-table::before {
    height: 0px;
 }
.el-table__fixed-right::before, .el-table__fixed::before{
     background-color:none;
 }
</style>
